<template>
    <div class="<%= data.pageConfig %> views-div">
        <div v-if="!state.showDetailVisible">
            <div class="queryBox" >
                <div class="inputBox">
                    <%for(var i = 0; i < data.searchConfig.length; i++){%>
                        <div>
                            <span><%= data.searchConfig[i].label %>：</span>
                              <% if(data.searchConfig[i].componenttype === 'input'){%>
                                <el-input v-model="state.queryForm.<%= data.searchConfig[i].prop %>" placeholder="请输入<%= data.searchConfig[i].label %>" style="width: 2.6rem;" clearable></el-input>
                              <%}%>
                              <% if(data.searchConfig[i].componenttype === 'select'){%>
                                  <el-select style="width:2.6rem" v-model="state.queryForm.<%= data.searchConfig[i].prop %>" placeholder="请选择<%= data.searchConfig[i].label %>">
                                      <% if(data.searchConfig[i].selectOptions&&data.searchConfig[i].selectOptions.length){%>
                                          <%for(var j = 0; j < data.searchConfig[i].selectOptions.length; j++){%>
                                              <el-option label="<%=data.searchConfig[i].selectOptions[j].label%>" value="<%=data.searchConfig[i].selectOptions[j].value%>" />
                                          <%}%>
                                      <%}else{%>
                                          <el-option v-for="item in $store.state?.codeList?.<%=data.searchConfig[i].prop%>Options||[]" :key="item.value" :label="item.label" :value="item.value" />
                                      <%}%>
                                  </el-select>
                              <%}%>
                              <% if(data.searchConfig[i].componenttype === 'time'){%>
                                  <el-date-picker style="width: 3.6rem" v-model="state.queryForm.<%= data.searchConfig[i].prop %>" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"  start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                              <%}%>
                        </div>
                    <%}%>
                </div>
                <div class="btnBox">
                    <el-button type="primary" @click="initData">
                        <el-icon class="mr5">
                            <Search />
                        </el-icon>查询
                    </el-button>
                    <el-button @click="reset" type="info">
                        <el-icon class="mr5">
                            <Refresh />
                        </el-icon>重置
                    </el-button>
                    <el-button  @click="handlerAction('add', null)" type="primary" plain>
                        <el-icon class="el-icon--left">
                            <Plus />
                        </el-icon>增加
                    </el-button>
                </div>
            </div>
            <div class="tableBox" v-loading="state.listLoading">
  
                <el-table :data="state.tableData" height="100%" border> 
                    <el-table-column align="center" type="index" label="序号" width="100" />
                    <%for(var i = 0; i < data.tableConfig.length; i++){%>
  
                      <% if(data.tableConfig[i].componenttype === 'select'){%>
                          <el-table-column prop="<%= data.tableConfig[i].prop %>" label="<%= data.tableConfig[i].label %>">
                              <template #default="scope">
                                  <% if(data.tableConfig[i].selectOptions&&data.tableConfig[i].selectOptions.length && data.tableConfig[i].label.indexOf('是否')>-1 ){%>
                                      {{[{label:'是',value:1},{label:'否',value:0}].find(item => item.value == scope.row.<%= data.tableConfig[i].prop %>)?.label}}
                                  <%}else{%>
                                      {{ 
                                          ($store.state?.codeList?.<%=data.searchConfig[i].prop%>Options||[])?.find(item => item.value == scope.row.<%= data.tableConfig[i].prop %>)?.label
                                      }}
                                  <%}%>
                              </template>
                         </el-table-column>
                      <%}else{%>
                          <el-table-column align="center" prop="<%= data.tableConfig[i].prop %>" label="<%= data.tableConfig[i].label %>" />
                      <%}%>
                    <%}%>
                    <el-table-column align="center" label="操作栏" width="180">
                        <template #default="scope" >
                            <el-link type="primary" @click="handlerAction('detail', scope.row)">详情</el-link>
                            &nbsp;
                            <el-link type="success" @click="handlerAction('edit', scope.row)">编辑</el-link>
                            &nbsp;
                            <el-link type="warning" @click="handlerAction('del', scope.row)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="footBox">
                    <el-pagination :current-page="state.queryForm.currentPage" :page-size="state.queryForm.pageSize"
                        layout="sizes, prev, pager, next, jumper,total,slot" :total="state.totalCount"
                        @size-change="pageSizeChange" @current-change="currentPageChange" />
                </div>
            </div>
        </div>
        <div v-if="state.showDetailVisible">
            <div class="width100 height100" >
                <div class="title">
                    <div>数据维护</div>
                    <div>
                        <el-button @click="handlerAction('back', null)" type="info"><el-icon class="el-icon--left">
                                <Back />
                            </el-icon>返回</el-button>
                        <el-button v-if="!state.formDisabled" type="primary" @click="handlerAction('submitForm', null)">
                            <el-icon class="el-icon--left">
                                <CircleCheck />
                            </el-icon>
                            保存
                        </el-button>
                    </div>
                </div>
                <div class="detailBox" style="width: 100%;margin: 0 auto;">
                    <el-form :model="state.formData" :rules="state.rules" ref="eForm">
                          <el-row>
                        <%for(var i = 0; i < data.editConfig.length; i++){%>
                            <el-col :span="12">
                                <el-form-item label="<%= data.editConfig[i].label %>" prop="<%= data.editConfig[i].prop %>" label-width="220px">
  
                                  <% if(data.editConfig[i].componenttype === 'input'){%>
                                      <el-input :disabled="state.formDisabled" v-model="state.formData.<%= data.editConfig[i].prop %>" :placeholder="state.formDisabled?'':'请输入<%= data.editConfig[i].label %>'" clearable></el-input>
                                    <%}%>
                                    <% if(data.editConfig[i].componenttype === 'select'){%>
                                        <el-select :disabled="state.formDisabled" v-model="state.formData.<%= data.editConfig[i].prop %>" :placeholder="state.formDisabled?'':'请选择<%= data.editConfig[i].label %>'">
                                            <% if(data.editConfig[i].selectOptions&&data.editConfig[i].selectOptions.length){%>
                                                <%for(var j = 0; j < data.editConfig[i].selectOptions.length; j++){%>
                                                    <el-option label="<%=data.editConfig[i].selectOptions[j].label%>" value="<%=data.editConfig[i].selectOptions[j].value%>" />
                                                <%}%>
                                            <%}else{%>
                                                <el-option v-for="item in $store.state?.codeList?.<%=data.editConfig[i].prop%>Options||[]" :key="item.value" :label="item.label" :value="item.value" />
                                            <%}%>
                                        </el-select>
                                    <%}%>
                                    <% if(data.editConfig[i].componenttype === 'time'){%>
                                        <el-date-picker  v-model="state.formData.<%= data.editConfig[i].prop %>" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"  :placeholder="state.formDisabled?'':'请选择<%= data.editConfig[i].label %>'"></el-date-picker>
                                    <%}%>
                                </el-form-item>
                            </el-col>
                        <%}%>
                          </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
  </template>
  <script setup>
  import { reactive, onMounted, toRefs, watch, computed, getCurrentInstance, nextTick } from "vue"; // ref 为我们的值创建了一个响应式引用
  import { getPageList , DeleteById,SaveOrUpdate,GetById} from '@/service/index.js'
  import { MessageSuccess, MessageError,MessageBox } from '@/plugin/utils.js'
  import { useStore } from 'vuex';
  import moment from 'moment';
  import qs from 'qs';
  
  const { proxy } = getCurrentInstance();
  const $store = useStore();
  const state = reactive({
    apipart:'<%= data.apipart %>',
    tableData: [],
    totalCount: 0, // 总记录条数
    listLoading: false,
    showDetailVisible: false,
    formData: {},
    formDisabled: false,
    queryForm:{
        currentPage: 1,
        pageSize: 15,
    },
    rules: {
  
    },
  });
  const initData = () => {
    state.listLoading = true
    let data = {
        asc: false,
        fields: [
        ],
        orderField: "",
        pageIndex: state.queryForm.currentPage,
        pageSize: state.queryForm.pageSize
    }
    <%for(var i = 0; i < data.searchConfig.length; i++){%>
        if (!!state.queryForm.<%= data.searchConfig[i].prop %>) {
            data.fields.push({
                "name": "<%= data.searchConfig[i].prop %>",
                "queryMethod": "like",
                "value": state.queryForm.<%= data.searchConfig[i].prop %>
            },)
        }
    <%}%>
    getPageList(state.apipart, data).then(res => {
        if (res.data.code = 200) {
            let data = res.data.data
            state.tableData = data.records
            state.totalCount = data.total
            state.listLoading = false
        }
    })
  }
  const handlerAction = (action, oRow) => {
    if (action === "add") {
        state.formDisabled = false
        state.formData = {}
        state.showDetailVisible = true
    } else if (action === "edit") {
        state.formDisabled = false
        state.formData = JSON.parse(JSON.stringify(oRow))
        state.showDetailVisible = true
    } else if (action === "detail") {
        state.formDisabled = true
        state.formData = JSON.parse(JSON.stringify(oRow))
        state.showDetailVisible = true
    } else if (action === "del") {
        MessageBox("请确认是否将该信息删除?", "提示", "warning")
        .then(async() => {
            DeleteById(state.apipart, qs.stringify({id:oRow.id})).then((res) => {
                if (res.data.code == 200) {
                    MessageSuccess("删除成功")
                    initData()
                } else {
                    MessageError("删除失败");
                }
            })
        })
        .catch((error) => {});
    } else if (action === "back") {
        state.showDetailVisible = false
        state.id = null
        state.files = []
        initData()
    } else if (action === "reset") {
        state.queryForm = {
            currentPage: 1,
            pageSize: 15,
        }
        initData()
    } else if (action === "submitForm") {
        proxy.$refs.eForm.validate((valid) => {
            if (valid) {
                let data = JSON.parse(JSON.stringify(state.formData))
                SaveOrUpdate(state.apipart,data).then(res => {
                    if (res.data.code == 200) {
                        MessageSuccess("保存成功!")
                        state.showDetailVisible = false
                        initData()
                    } else {
                        MessageError("保存失败!");
                    }
                })
            }
        })
    }
  }
  onMounted(() => {
    initData()
  })
  //分页大小修改事件
  const pageSizeChange = (val) => {
    state.queryForm.pageSize = val;
    initData();
  }
  //当前页修改事件
  const currentPageChange = (val) => {
    state.queryForm.currentPage = val;
    initData();
  }
  const FormatterTime = (val) => {
    if (!val) {
        return '—';
    } else {
        return moment(parseInt(val)).format('YYYY-MM-DD HH:mm');
    }
  }
  </script>
  <style lang="scss" scoped>
  .views-div {
    width: 100%;
    height:100%;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px 0px rgba(203, 203, 203, 0.79);
    border-radius: 10px;
    padding: 25px;
    &>div{
        width: 100%;
        height:100%; 
    }
    .queryBox{
        width: 100%;
        height:78px;
        display: flex;
        justify-content: space-between;
  
        .inputBox{
            width: 1140px;
            height: 78px;
            display: flex;
            justify-content: flex-start;
            align-items:center;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-between;
  
            &>div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                &:not(:nth-child(3n+1)) {
                    margin-left: 40px;
  
                }
            }
        }
        .btnBox {
            display: flex;
            &>button {
                margin-left: 17px;
                .el-icon {
                    width: 15px;
                    height:15px;
                    svg {
                        width: 15px;
                        height:15px;
                    }
                }
            }
        }
    }
    .tableBox {
        width: 100%;
        height: calc(100% - 101px);
        border-radius: 5px;
        z-index: 10;
        padding-top: 23px;
        .footBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            font-size: 14px;
            color: #fff;
  
            :deep(.el-pagination__total) {
                margin-right: 0;
                margin-left: 5px;
            }
        }
    }
    .title {
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #000;
        padding-bottom: 40px;
        display: flex;
        justify-content: space-between;
    }
    .detailBox{
        height:calc(100% - 128px);
        overflow: scroll;
    }
  }
  
  </style>